<template>
  <div class="box">
    <!-- <router-link to="/" class="www">
      <div class="iconfont iconjiantou2"></div>
    </router-link>
    <div class="register">
      <router-link to="/register" class="www">前往注册</router-link>
    </div>-->
    <van-nav-bar
      title="用户登录"
      left-text="返回"
      right-text="前往注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="img" v-if="show">
      <img src="../assets/login2.jpg" />
    </div>
    <div class="img" v-else>
      <div v-if="img">
        <img :src="img|filtersUrl" />
      </div>
      <div v-else>
        <img src="../assets/logo.png" />
      </div>
    </div>
    <div class="name" v-if="!show">
      <p>{{name}}</p>
    </div>

    <Input test="登录账号" runer="^\d{5,11}$" type="text" @InputBtn="setUserName" />
    <Input test="登录密码" runer="^[a-zA-Z0-9]{3,11}$" :type="check" @InputBtn="setPassWord" />
    <!-- <div class="eye">
      <van-icon name="eye-o" size="6vw" @mousedown="eye" @mouseup="up" v-if="eyes" />
    </div>-->

    <Btn text="登录" @Btn="submit" :fy="flag" />

    <div class="remember">
      <label for="deala">
        <van-checkbox v-model="checked" @click="remember" icon-size="4vw">记住账号密码</van-checkbox>
      </label>
    </div>
  </div>
</template>

<script>
// import Input from "../components/AutInput";
// import Btn from "../components/AutBtn";

export default {
  components: {
    Input: () => import("../components/AutInput"),
    Btn: () => import("../components/AutBtn")
  },
  data() {
    return {
      img: "",
      name: "",
      show: false,
      check: "password",
      username: "",
      password: "",
      flag: true,
      // eyes: false,

      checked: false,
      usernames: "",
      passwords: "",
      usernameruner: "^\\d{5,11}$",
      passwordruner: "^[a-zA-Z0-9]{3,11}$",
      usernamess: "",
      passwordss: ""
    };
  },
  methods: {
    // eye() {
    //   this.check = "text";
    // },
    // up() {
    //   this.check = "password";
    // },
    onClickLeft() {
      this.$router.replace({ name: "Home" });
    },
    onClickRight() {
      this.$router.replace({ name: "register" });
    },

    setUserName(username) {
      this.username = username;
    },
    setPassWord(password) {
      this.password = password;
    },
    remember() {
      if (this.username == "" || this.password == "") {
        this.$dialog.alert({ message: "请输入正确的账号、密码" });
        this.checked = false;
        return;
      }
      if (!new RegExp(this.usernameruner).test(this.username)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码" });
        this.checked = false;
        return;
      }
      if (!new RegExp(this.passwordruner).test(this.password)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码" });
        this.checked = false;
        return;
      }
      if (this.checked) {
        localStorage.setItem("username", this.username);
        localStorage.setItem("password", this.password);
        // console.log(1);
      }
      if (!this.checked) {
        localStorage.removeItem("username");
        localStorage.removeItem("password");
        // console.log(2);
      }
      // if (

      // ) {
      //   this.flags = true;
      //   // console.log(this.flags);
      // } else {
      //   this.flags = false;
      // // }
      // if (this.username == "" || this.password == "") {
      //   console.log(this.flags);
      //   return;
      //
      // } else {
      //   localStorage.removeItem("username");
      //   localStorage.removeItem("password");
      //   this.flags = false;
      //   console.log(this.flags);
      // }
    },
    submit() {

      if (!new RegExp(this.usernameruner).test(this.username)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码" });
        return;
      }
      if (!new RegExp(this.passwordruner).test(this.password)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码" });
        return;
      }
      // if (!new RegExp(this.usernameruner).test(this.username)) {
      //   this.$toast.fail("请输入最少五位数的账号");
      //   return;
      // }
      // if (!new RegExp(this.passwordruner).test(this.password)) {
      //   this.$toast.fail("请输入最少三位数的密码");
      //   return;
      // }
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.username,
          password: this.password
        }
      })
        .then(res => {
          // console.log(res.data.data.user.id);
          // console.log(res.data.data.token);

          localStorage.removeItem("img");
          localStorage.removeItem("nickname");
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userId", res.data.data.user.id);

          if (res.data.message == "登录成功") {
            this.$notify({ type: 'success', message: res.data.message, duration: 1500, });
            if (localStorage.getItem('back')) {

              this.$router.push(localStorage.getItem('back'))
              localStorage.removeItem('back')

            }
            else {
              this.$router.replace({ name: "Home" });
            }
          } else {
            this.$dialog.alert({ message: res.data.message });
            // console.log(res.data.message);
          }
        })
        .catch(err => {
          this.$dialog.alert({
            message: "用户信息校验失败，重新登录"
          });
        });
      // console.log(this.username, this.password);
    }
  },
  watch: {
    username() {
      if (this.username == this.usernamess) {
        // this.img = localStorage.getItem("img");
        this.show = false;
      } else {
        this.show = true;
      }
      if (this.checked) {
        localStorage.setItem("username", this.username);
        localStorage.setItem("password", this.password);
      }

      if (this.username == "") {
        localStorage.removeItem("username");
        localStorage.removeItem("password");
        this.checked = false;
      }
    },
    password() {
      // this.eyes = true;
      if (this.checked) {
        localStorage.setItem("username", this.username);
        localStorage.setItem("password", this.password);
      }
      if (this.password == "") {
        localStorage.removeItem("username");
        localStorage.removeItem("password");
        this.checked = false;
        // this.eyes = false;
      }
    }
  },
  mounted() {
    if (localStorage.getItem("img") == null) {
      this.show = true;
    }
    if (localStorage.getItem("username") && localStorage.getItem("password")) {
      this.usernamess = localStorage.getItem("username");
      this.name = localStorage.getItem("nickname");
      // console.log(localStorage.getItem("nickname"));

      this.img = localStorage.getItem("img");
      this.checked = true;
    } else {
      localStorage.removeItem("img");
      this.checked = false;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  margin-bottom: 40px;

  background-color: #fff;
  // height: 450px;
  width: 320px;
  margin: 20px auto;
  border-radius: 10.001px;
  position: relative;
  /deep/ .van-nav-bar {
    height: 13.889vw;
  }
  /deep/ .van-nav-bar__left {
    font-size: 3.333vw;
  }
  /deep/ .van-nav-bar__right {
    font-size: 3.333vw;
  }
  /deep/ .van-nav-bar__title {
    font-size: 4.444vw;
  }

  // .www {
  //   text-decoration: none;
  // }
  // .register {
  //   right: 20.002px;
  //   top: 20.002px;
  //   position: absolute;
  //   font-size: 7.999px;
  // }
  // .iconjiantou2 {
  //   font-size: 15.998px;
  //   padding: 20.002px 0 0 20.002px;
  //   //   position: absolute;
  // }

  .name p {
    font-size: 18px;
  }
  .img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-top: 29.999px;
    margin-bottom: 10px;
    border: none;

    overflow: hidden;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    // height: 100%;
  }
  .name {
    text-align: center;
    padding: 10px;
  }
  .remember {
    text-align: center;
    margin-left: 110px;
    font-size: 12px;
    color: #eee;
    // /deep/ .van-checkbox__icon {
    //   // font-size: 4.444vw;
    // }
  }
}
</style>
